<template>
  <!-- 对话框配置项: 关闭时销毁-->
  <el-drawer
    v-model="dialogs.notice.add"
    direction="rtl"
    :close-on-click-modal="false"
    :modal="false"
  >
    <template #title>
      <h4>发布公告</h4>
    </template>
    <template #default>
      <p style="color: #666; margin-left: 10px">
        公告发布时系统将短信通知所列的受影响社区
      </p>
      <div style="height: 20px"></div>
      <el-table :data="wuye" max-height="400">
        <el-table-column property="name" label="社区名称" />
        <el-table-column property="tel" label="物业电话" />
      </el-table>
      <el-divider />
      <el-input v-model="notice.title" placeholder="输入公告标题" />
      <br />
      <br />
      <el-input
        v-model="notice.content"
        :autosize="{ minRows: 10, maxRows: 4 }"
        maxlength="255"
        show-word-limit
        type="textarea"
        placeholder="输入公告内容"
      />
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addNotice">发布</el-button>
      </div>
    </template>
  </el-drawer>
  <!-- nav.vue点击发布公告，hook开始绘线，绘线结束->缓冲区分析->拿到物业数据->公告页挂载 -->
</template>

<script setup>
import { ref, toRefs } from 'vue'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia  (pina 公共数据)
import { useUserStore } from '@/stores/user' // 使用pinia
import noticeApi from '@/apis/notice.js' //引入封装方法
// import { onMounted } from 'vue' //生命周期挂载
import { ElMessage } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { useWuyeStore } from '@/stores/wuye'
const { wuye } = useWuyeStore()
const { map } = toRefs(useMapStore())
const { dialogs } = useDialogsStore() //弹窗功能实现
const { user } = useUserStore() //

const notice = ref({ title: '', content: '' }) //输入框中的空值
function addNotice() {
  //（新增一个请求）
  noticeApi
    .addOne({
      user_id: user.id,
      notice_title: notice.value.title,
      notice_content: notice.value.content,
      notice_public: '交管局',
    })
    .then((res) => {
      if (res.code == 0) {
        ElMessage({
          message: '公告成功发布！',
          type: 'success',
        })
        dialogs.notice.add = false
      } else {
        ElMessage.error('公告发布失败！')
      }
    })
  map.value.getLayers().pop()
}
function cancel() {
  map.value.getLayers().pop()
  dialogs.notice.add = false
}
// console.log(user.name)
</script>

<style scoped>
#web {
  width: 600px;
  font-size: 40px;
}
</style>
